Thanks! I think a safer approach would be to use the Vue router instead of hardcoding URL paths, since it should work in all cases.

You'll want to use router.push, like so:

It's also possible to reference routes by name, e.g.:

Relevant router docs are here: https://router.vuejs.org/guide/essentials/navigation.html#Navigate-to-a-different-location

For formatter functions specifically, as commonly used in tables, you might need to utilize this hack to gain access to the router:

The routes are defined here:

I tried this, however that seems to break internal navigation, as when i click a link within the app it'll navigate to /basepath/basepath/path

while the links correctly translate to /basepath/path in the dom. So seems the router is doing something internally. any ideas?

(see [https://github.com/Squixx/frontend/tree/feat/use-router](this branch))

update:

So basically from what i'm understanding. The way the tables are built means that the content is injected outside of vue, so any template binding basically is not available. Ideally you'd just use a router-link component. But with the current setup thats not possible.

as a simple 'href' cant be two things at the same time. It's either /base/path, or /path.

It needs to be /path for the router to correctly route inside the SPA context. and /base/path for the browser to correctly know the route outside of the SPA context.

using a relative link allows this to work for both contexts.

To actually use the router inside this context you'd have to rebuild most tables, probably isnt worth it? My suggestion would be to actually go with relative links as it'll be easier to work with without refactoring most of the application